import React from 'react'
import { connect } from 'react-redux'
import { Icon, Spin } from 'antd'
import Condition from 'components/condition'
const { If, Else } = Condition;
import {messages} from "share/common";
import menuRoute from "routes/menuRoute";
import routeService from 'routes/route.service';
import NullCard from "containers/dashboard/dashboard-component/null-card"
import CardTitle from "containers/dashboard/dashboard-component/card-title"

class CommonFunction extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: false,
      commonFunc: JSON.parse(localStorage.getItem("hly.commonFunction")) || {
        TENANT_MODE: {
          PERSONAL_MODE: [],
          ADMIN_MODE: []
        },
        COMPANY_MODE: {
          PERSONAL_MODE: [],
          ADMIN_MODE: []
        }
      }, // 常用功能,
      tenantmode: ''
    }
  }

  componentWillMount() {
    this.setState({
      tenantmode: this.props.tenantMode ? "TENANT_MODE" : "COMPANY_MODE"
    })
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      tenantmode: nextProps.tenantMode ? "TENANT_MODE" : "COMPANY_MODE"
    })
  }

  goPersonalSetting = () => {
    window.open(`${window.ISIE9 ? "#" : ""}${menuRoute.getRouteItem('personal-settings','key').url}?tab=2`, '_blank');
  };

  menuRouterDeal = (item) => {
    routeService.menuRouterDeal(item, this.context, this.props.authToken);
  };

  render() {
    const { load, commonFunc, tenantmode } = this.state;
    const { removeModule, user } = this.props;
    const colorList = ["#3BA0FF", "#2FCC93", "#975FE4", "#FAD337", "#F2637B"];
    let totalLength = commonFunc[tenantmode].PERSONAL_MODE.length + commonFunc[tenantmode].ADMIN_MODE.length;
    return (
      <Spin spinning={load}>
        <CardTitle  cardKey={"1"}
                    title={messages('dashboard.key131')/*常用功能*/}
                    removable={false}
                    removeModule={(key) => removeModule(key)}
                    reloadModule={() => {}}>
          {!user.enableNewPermission && <a className="card-sub-title" onClick={() => this.goPersonalSetting()}>{messages('dashboard.key171')/*设置*/}</a>}
        </CardTitle>
        <div className="card-content">
          <Condition>
            <If value={totalLength}>
              <ul>
                {
                  commonFunc[tenantmode].PERSONAL_MODE.map((item, index) => {
                    return (
                      <li key={item}
                          className="tag-item"
                          onClick={() => this.menuRouterDeal(menuRoute.getMenuItemByAttr(item, 'key'))}>
                        <span className="badge-status-dot" style={{backgroundColor: colorList[index % colorList.length]}}/>
                        {messages(`menu.${item}`)}
                      </li>
                    )
                  })
                }
                <If value={this.hasAnyAuthorities(['ROLE_TENANT_ADMIN', 'ROLE_COMPANY_ADMIN']) && commonFunc[tenantmode].ADMIN_MODE.length}>
                  <p className="admin-mode"><Icon type="caret-down" />{messages('dashboard.key101')/*管理员模式*/}</p>
                  {
                    commonFunc[tenantmode].ADMIN_MODE.map((item, index) => {
                      return (
                        <li key={item}
                            className="tag-item"
                            onClick={() => this.menuRouterDeal(menuRoute.getMenuItemByAttr(item, 'key'))}>
                          <span className="badge-status-dot" style={{backgroundColor: colorList[index % colorList.length]}}/>
                          {messages(`menu.${item}`)}
                        </li>
                      )
                    })
                  }
                </If>
              </ul>
            </If>
            <Else>
              <NullCard imgType={"commonFunc"} message={user.enableNewPermission ? messages('dashboard.key192')/*还没有常用功能*/ : messages('dashboard.key159')}/>
            </Else>
          </Condition>
        </div>
      </Spin>
    )
  }
}

CommonFunction.contextTypes = {
  router: React.PropTypes.object
};

CommonFunction.propTypes = {
  tenantMode: React.PropTypes.bool.isRequired, //当前是集团模式还是公司模式
  removeModule: React.PropTypes.func.isRequired,

};

function mapStateToProps(state) {
  return {
    authToken: state.main.authToken,
    user: state.login.user
  }
}


export default connect(mapStateToProps)(CommonFunction);
